import React,{useEffect,useState,useRef} from 'react';
import {
    SafeAreaView,
    StyleSheet,
    ScrollView,
    View,
    Text, Image,
    DeviceEventEmitter, TextInput, TouchableOpacity,
} from 'react-native';
import Header from '../../widgets/Header';
import {AppInfo, FontFamily, getffly} from '../../utils/common';
import screen from '../../utils/screen';
import {useStores} from '../../store';
import {observer} from 'mobx-react';
import {LGBtn} from '../../widgets/buttons';
import RequestUtil from '../../utils/RequestUtil';
import Api from '../../utils/Api';
import {AppModal} from '../../widgets/modal';
import AppEvent from '../../utils/AppEvent';
import Constants from '../../utils/Constants';
import Images from '../../images/Images';
import LogoutAlert from '../../components/LogoutAlert';
import VerifyDialog from '../../components/VerifyDialog';


export default ({navigation})=>{


    const verifyDialog = useRef()

    const [newpsw,setNewpsw] = useState('')
    const [newpsw1,setNewpsw1] = useState('')
    const [phone,setPhone] = useState('')
    const [enable,setEnable] = useState(false)
    const [code,setCode] = useState(false)


    useEffect(()=>{
        const {mobile,isFormLogin} = navigation.state.params
        setPhone(mobile)


    },[])

    useEffect(()=>{
        if( newpsw.length && newpsw1.length){
            setEnable(true)
        }else{
            setEnable(false)
        }
    },[newpsw,newpsw1])


    const changePsw = ()=>{
        AppModal.showLoading()
        let parma = {
            receiverType:'cellphone',
            receiverArea:AppInfo.countryId,
            receiverId:phone,
            password:newpsw,
            code:code
        }
        RequestUtil.post(Api.retrievePsw,parma,true).then(res=>{
            AppModal.hideTip()
            AppModal.showSuccess("Reset completed")
            setTimeout(()=>{
                navigation.pop()
                DeviceEventEmitter.emit(AppEvent.show_login)
            },1500)

        },error=>{
            AppModal.hideTip()
            console.log(error)
            AppModal.showError(error.msg)
        })
    }



    const onSubmitPsw = ()=>{
        if(newpsw != newpsw1){
            AppModal.showTip(Constants.error.password_does_not_match)
            return
        }
        if(newpsw.length < 6){
            AppModal.showTip(Constants.error.at_least_6_characters)
            return
        }
        let isnum = /^\d+$/.test(newpsw);
        if(isnum){
            AppModal.showTip(Constants.error.cannot_contain_only_numbers)
            return
        }
        changePsw()
    }

    const renderPhoneInput = ()=>{
        return (
            <ScrollView contentContainerStyle={styles.content}>
                <Text style={{fontSize: 12,color:'#000',marginTop: screen.PIXEL_30}}>{Constants.login.mobile}</Text>

                <View style={styles.inputWrap}>
                    <TextInput
                        // keyboardType='numeric'
                        allowFontScaling={false}
                        placeholderTextColor={'rgba(255, 255, 255, 0.35)'}
                        style={ styles.mobileInput}
                        value={phone}
                        onChangeText={(text) => {
                            setPhone(text)
                        }}
                    />


                </View>

                {
                    phone.length ? (
                        <LGBtn
                            style={{width:'100%',height:screen.PIXEL_80,marginTop:screen.PIXEL_60}}
                            title={Constants.login.continue}
                            onPress={()=>{
                                verifyDialog.current.show(phone,(code)=>{
                                    setCode(code)
                                },true)
                            }}
                        />
                    ):(
                        <View style={ styles.btnGray}>
                            <Text style={{color:'#fff',fontSize:16}}>{Constants.login.submit}</Text>
                        </View>
                    )
                }


            </ScrollView>
        )
    }


    return (
        <View style={styles.container}>

            <Header title={Constants.login.retrieve_password} navigation={navigation}/>

            {
                code ? (
                    <ScrollView contentContainerStyle={styles.content}>

                        <Text style={{fontSize: 12,color:'#000',marginTop: screen.PIXEL_30}}>{Constants.login.new_password}</Text>

                        <View style={styles.inputWrap}>
                            <TextInput
                                // keyboardType='numeric'
                                allowFontScaling={false}
                                placeholderTextColor={'rgba(255, 255, 255, 0.35)'}
                                style={ styles.mobileInput}
                                value={newpsw}
                                onChangeText={(text) => {
                                    setNewpsw(text)
                                }}
                            />

                            <View style={styles.eyeBtn}>
                                <Image source={Images.eye_open}
                                       resizeMode={'contain'}
                                       style={{width:screen.PIXEL_40,height:screen.PIXEL_40}}/>
                            </View>

                        </View>

                        <Text style={{fontSize: 12,color:'#000',marginTop: screen.PIXEL_30}}>{Constants.login.confirm_password}</Text>

                        <View style={styles.inputWrap}>
                            <TextInput
                                // keyboardType='numeric'
                                allowFontScaling={false}
                                placeholderTextColor={'rgba(255, 255, 255, 0.35)'}
                                style={ styles.mobileInput}
                                secureTextEntry={true}
                                value={newpsw1}
                                onChangeText={(text) => {
                                    setNewpsw1(text)
                                }}
                            />

                            <View style={styles.eyeBtn}>
                                <Image source={Images.eye_close}
                                       resizeMode={'contain'}
                                       style={{width:screen.PIXEL_40,height:screen.PIXEL_40}}/>
                            </View>

                        </View>

                        {
                            enable ? (
                                <LGBtn
                                    style={{width:'100%',height:screen.PIXEL_80,marginTop:screen.PIXEL_60}}
                                    title={Constants.login.submit}
                                    onPress={onSubmitPsw}
                                />
                            ):(
                                <View style={ styles.btnGray}>
                                    <Text style={{color:'#fff',fontSize:16}}>{Constants.login.submit}</Text>
                                </View>
                            )
                        }


                    </ScrollView>
                ): renderPhoneInput()
            }



            <VerifyDialog
                ref={verifyDialog}
            />
        </View>
    )
}

const styles= StyleSheet.create({
    container:{
        flex:1
    },
    content:{
        flex:1,
        paddingHorizontal:screen.PIXEL_60
    },
    row:{
        height: screen.PIXEL_80, width: '100%',flexDirection:'row',alignItems: 'center',
        justifyContent: 'space-between',borderBottomWidth:1,borderBottomColor:'rgba(32,32,32,0.3)'
    },
    leftText:{
        fontFamily:getffly("bold"), color: '#377C74',
        textAlign: 'center', padding: 0, fontSize: 20,
        // '#A6C4C3'
    },
    right:{
        width:screen.PIXEL_30,height:screen.PIXEL_30
    },
    inputWrap:{
        width:'100%',
        height:screen.PIXEL_90,
        flexDirection:'row',
        borderBottomWidth:1,
        borderBottomColor:'rgba(32,32,32,0.3)'
    },mobileInput:{
        fontFamily: getffly(FontFamily.bold),
        flex:1,
        fontSize:20,
        color:'#377C74',
        marginRight:screen.PIXEL_60
    },eyeBtn:{
        width:screen.PIXEL_50,
        height:screen.PIXEL_50,
        position:'absolute',
        right:0,
        top:screen.PIXEL_20,
        justifyContent: 'center',
        alignItems:'center'
    },btnGray:{
        backgroundColor:'#C1C1C1',height:screen.PIXEL_80,width:'100%',marginTop:screen.PIXEL_60,
        borderRadius:screen.PIXEL_40,justifyContent:'center',alignItems:'center'
    }

})
